<template lang="html">
  <div class="right_float">
    <div class="right_top">
      <div class="right_item" v-for="(item, index) in rightItemList" :key="index" @mouseenter="chooseRightIndex = index"
        @mouseleave="chooseRightIndex = -1">
        <Icons :font="'#' + item.name" class="icon_styl" :class="item.name" fontSize="30px"></Icons>
      </div>
    </div>
    <div class="right_bottom" @click="goTopFun">
      <Icons font="#icon-jts" class="icon-jts" fontSize="20px"></Icons>
      <div class="go_top">回到<br />顶部</div>
    </div>
  </div>
</template>
 
<script>
export default {
  name: "Front-RightFloat",
  data() {
    return {
      chooseRightIndex: -1,
      rightItemList: [
        {
          index: 0,
          name: "icon-kf"
        },
        {
          index: 1,
          name: "icon-xx"
        },
        {
          index: 2,
          name: "icon-fk"
        },
        {
          index: 3,
          name: "icon-sc"
        },
        {
          index: 4,
          name: "icon-sc1"
        },
        {
          index: 4,
          name: "icon-dd"
        }
      ]
    };
  },
  watch: {},
  mounted() {},
  methods: {
    goTopFun() {
      window.scrollTo({ top: 0, behavior: "smooth" });
    }
  }
};
</script>
 
<style lang="less" scoped>
@import "~@/assets/styles/main.less";

.right_float {
  position: fixed;
  top: 220px;
  right: 12px;
  z-index: 1001;

  .right_top {
    padding: 14px 6px;
    border-radius: 1000px;
    background-color: #ffffff;

    .right_item {
      margin-bottom: 12px;

      .icon_styl {
        font-size: 38px;
        cursor: pointer;
      }
    }

    .right_item:last-child {
      margin-bottom: 0px;
    }
  }

  .right_bottom {
    margin-top: 14px;
    padding: 6px 0 10px 0;
    border-radius: 1000px;
    background-color: #ffffff;
    cursor: pointer;

    .go_top {
      font-size: 12px;
    }
  }
}
</style>